<template>
  <!--搜索-->
  <!--    搜索框-->
  <div style="padding: 10px 0">
    <el-input
      style="width: 160px"
      placeholder="请输入生产编号"
      clearable
      v-model="searchid"
    ></el-input>
    <el-select
      style="margin-left: 15px; width: 160px"
      v-model="typeState"
      clearable
      placeholder="请选择疫苗类型"
    >
      <el-option
        v-for="item in typeForm"
        :key="item.index"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-input
      style="width: 160px; margin-left: 15px"
      placeholder="请输入供应商名称"
      clearable
      v-model="searchmaker"
    ></el-input>
    <el-button type="primary" style="margin-left: 15px" @click="getvoccinAll">
      <el-icon style="vertical-align: middle">
        <search />
      </el-icon>
      <span style="vertical-align: middle"> 搜索 </span>
    </el-button>
    <!-- 添加按钮 -->
    <el-button type="primary" style="margin-left: 15px" @click="addvocinn">
      <el-icon style="margin-right: 5px"><CirclePlusFilled /></el-icon>
      添加
    </el-button>
  </div>
  <el-table
    :data="tableData"
    :default-sort="{ prop: 'date', order: 'descending' }"
    style="width: 100%"
    height="600"
  >
    <el-table-column fixed prop="id" label="序号" width="60" align="center" />
    <el-table-column
      prop="createid"
      label="生产编号"
      width="120"
      align="center"
    />
    <el-table-column prop="vname" label="疫苗名称" width="200" align="center" />
    <el-table-column label="疫苗等级" width="80" align="center">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>类别: {{ scope.row.vsort }}</div>
            <div>供应商: {{ scope.row.maker }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.vrank }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column prop="vsort" label="疫苗类别" width="140" align="center">
      <template #default="scope">
        <el-tag type="warning" disable-transitions>{{
          scope.row.vsort
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column sortable label="接种针数" width="120" align="center">
      <template #default="scope">
        <el-tag type="success" disable-transitions effect="dark">{{
          scope.row.vjab
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="vsum"
      label="采购入库数"
      width="100"
      align="center"
    />
    <el-table-column
      prop="vsurplus"
      sortable
      label="库存剩余数"
      width="120"
      align="center"
    >
      <template #default="scope">
        <el-tag type="info" disable-transitions effect="dark">{{
          scope.row.vsurplus
        }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="createtime"
      sortable
      label="创建时间"
      width="200"
      align="center"
    />
    <el-table-column
      prop="maker"
      label="供应商名称"
      width="250"
      align="center"
    />
    <el-table-column
      prop="updatetime"
      sortable
      label="生产时间"
      width="200"
      align="center"
    />
    <el-table-column fixed="right" label="操作" width="160" align="center">
      <template #default="scope">
        <el-button type="warning" size="small" @click="toedit(scope.row)"
          >修改</el-button
        >
        <el-button type="danger" size="small" @click="todelete(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <div style="padding: 10px 0">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="pageNum"
      :page-sizes="[10, 20, 30, 50]"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>


    <!-- 编辑或者添加的弹窗 -->
    <el-dialog title="疫苗信息" v-model="dialogFormVisible" width="60%">
      <el-form :model="form" size="default" :rules="rules" ref="form">
        <el-row>
          <el-col :span="5"
            ><el-form-item label="序号" label-width="100px" prop="id">
              <el-input
                v-model="form.id"
                autocomplete="off"
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10"
            ><el-form-item label="生产编号" label-width="100px" prop="createid">
              <el-input v-model="form.createid" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="15">
          <el-form-item label="疫苗名称" label-width="100px" prop="vname">
            <el-input
              v-model="form.vname"
              autocomplete="off"
            ></el-input> </el-form-item
        ></el-col>
        <el-row>
          <el-col :span="7">
            <el-form-item label="疫苗等级" label-width="100px" prop="vrank">
              <el-select v-model="form.vrank">
                <el-option label="甲类" value="甲类" />
                <el-option label="乙类" value="乙类" />
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><el-form-item label="疫苗类别" label-width="100px" prop="vsort">
              <el-select v-model="form.vsort" placeholder="请选择">
                <el-option
                  v-for="item in typeForm"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select> </el-form-item
          ></el-col>
        </el-row>
        <el-row>
          <el-col :span="6"
            ><el-form-item label="接种针数" label-width="100px" prop="vjab">
              <el-input
                v-model="form.vjab"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="7"
            ><el-form-item
              label="采购入库数量"
              label-width="120px"
              prop="vsum"
            >
              <el-input
                v-model="form.vsum"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="7"
            ><el-form-item
              label="库存剩余数量"
              label-width="120px"
              prop="vsurplus"
            >
              <el-input
                v-model="form.vsurplus"
                autocomplete="off"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
        <el-col :span="8"
          ><el-form-item label="创建时间" label-width="100px" prop="updatetime">
            <el-date-picker
              v-model="form.updatetime"
              type="datetime"
              placeholder="选择日期和时间"
              :size="size" /></el-form-item
        ></el-col>
        <el-row>
          <el-col :span="12"
            ><el-form-item label="生产厂家" label-width="100px" prop="maker">
              <el-input v-model="form.maker" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="生产时间" label-width="100px" prop="createtime">
              <el-date-picker
                v-model="form.createtime"
                type="datetime"
                placeholder="选择日期和时间"
                :size="size" /></el-form-item
          ></el-col>
        </el-row>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false"> 取消</el-button>
          <el-button type="primary" @click="saveData('form')"> 确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "Vaccin",
  data() {
    return {
      tableData: [],
      total: 0, //数据总条数
      pageNum: 1, //当前页
      pageSize: 10, //页大小
      searchid: "", //搜索疫苗编号
      typeState: "", //选中的疫苗类型
      searchmaker: "", //搜索供应商名称
      typeForm: [
        { value: "减毒疫苗", label: "减毒疫苗" },
        { value: "灭活疫苗", label: "灭活疫苗" },
        { value: "核酸疫苗", label: "核酸疫苗" },
        { value: "亚单位疫苗", label: "亚单位疫苗" },
        { value: "病毒载体疫苗", label: "病毒载体疫苗" },
        { value: "病毒样颗粒疫苗", label: "病毒样颗粒疫苗" },
      ], //疫苗类型列表
      dialogFormVisible: false, //信息弹出框是否展示
      form: {
      }, //添加或者修改的数据
      rules: {
        typeId: [
          { required: true, message: "请输入类型编号", trigger: "blur" },
        ],
        typename: [
          { required: true, message: "请输入类型名称", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      //页大小改变
      this.pageSize = val;
      this.getvoccinAll();
    },
    handleCurrentChange(val) {
      //当前页改变
      this.pageNum = val;
      this.getvoccinAll();
    },
    //分页查询
    getvoccinAll() {
      this.$http
        .get("/inoculations/vaccin/pageall", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            createid: this.searchid,
            vsort: this.typeState,
            maker: this.searchmaker,
          },
        })
        .then((res) => {
          if (res.statusCode == "200") {
            this.total = res.data.total;
            this.tableData = res.data.records;
            console.log(res.data.records);
          }
        })
        .catch(() => {
          ElMessage.error("数据加载失败,请刷新！");
        });
    },
    // 编辑
    toedit(row) {
      this.form = row;
      this.dialogFormVisible = true;
    },
    // 添加
    addvocinn() {
      this.form = {};
      this.dialogFormVisible = true;
    },

    //用于数据的添加和更新
    saveData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$http
            .post("/inoculations/vaccin/save", this.form)
            .then((res) => {
              if (res.statusCode == "200") {
                ElMessage({
                  message: "成功！",
                  type: "success",
                });
                this.dialogFormVisible = false;
                this.getvoccinAll();
              }
            })
            .catch(() => {
              ElMessage.error("修改失败！");
            });
        } else {
          ElMessage({
            message: "请填写！",
            type: "warning",
          });
          return false;
        }
      });
    },
    // 删除
    todelete(id) {
      ElMessageBox.confirm("是否删除选中数据？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let token = localStorage.getItem("token");
          this.$http
            .delete("/inoculations/vaccin/del/" + id, token)
            .then((res) => {
              if (res.statusCode == "200") {
                ElMessage({
                  message: "删除成功！",
                  type: "success",
                });
                this.getvoccinAll();
              }
            })
            .catch(() => {
              ElMessage.error("删除失败！");
            });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消！",
          });
        });
    },
  },
  created() {
    this.getvoccinAll();
  },
};
</script>

<style></style>
